<!-- 招商合作 -->
<template>
    <div>
        <a-card title="" :bordered="false">
            <div class="title">土地开发规划</div>
           
            <a-form @submit="handleSubmit" class="form" layout="horizontal" :form="form">
                <a-row class="form-row" :gutter="32">
                    <a-col :span="8">
                        <a-form-item label="项目编号">
                            <a-input
                                disabled
                                placeholder="请输入项目编号"
                                v-decorator="['project_number',{initialValue: projectNumber},
                                {rules: [{ required: true, message: '请输入项目编号', whitespace: true}]}]"/>
                        </a-form-item>
                    
                    </a-col>
                    <a-col :span="8">
                        <a-form-item label="项目名称">
                            <a-input
                                disabled
                                placeholder="请输入项目名称"
                                v-decorator="['project_name',{initialValue: projectName},
                                {rules: [{ required: true, message: '请输入项目名称', whitespace: true}]}]"/>
                        </a-form-item>
    
                    </a-col>
                    <a-col :span="8">
                        <a-form-item label="规划次数">
                            <a-input
                                placeholder="规划次数"
                                v-decorator="['plans_number',
                                {rules: [{ required: true, message: '规划次数', whitespace: true}]}]"/>
                        </a-form-item>
    
                    </a-col>
                    
                    <a-col :span="8">
                        <a-form-item
                            label="规划期限">
                            <a-input
                                placeholder="规划期限"
                                v-decorator="['plans_term',
                                {rules: [{ required: true, message: '规划期限', whitespace: true}]}]"/>
                        </a-form-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-item
                            label="规划用途编码">
                            <a-input
                                placeholder="规划用途编码"
                                v-decorator="['plans_usage_code',
                                {rules: [{ required: true, message: '规划用途编码', whitespace: true}]}]"/>
                        </a-form-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-item
                            label="规划用途名称">
                            <a-input
                                placeholder="规划用途名称"
                                v-decorator="['plans_usage_name',
                                {rules: [{ required: true, message: '规划用途名称', whitespace: true}]}]"/>
                        </a-form-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-item
                            label="坡度级别">
                            <a-input
                                placeholder="坡度级别"
                                v-decorator="['slope_level',
                                {rules: [{ required: true, message: '坡度级别', whitespace: true}]}]"/>
                        </a-form-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-item
                            label="地块面积">
                            <a-input
                                placeholder="地块面积"
                                v-decorator="['land_area',
                                {rules: [{ required: true, message: '地块面积', whitespace: true}]}]"/>
                        </a-form-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-item
                            label="净面积">
                            <a-input
                                placeholder="净面积"
                                v-decorator="['net_area',
                                {rules: [{ required: true, message: '净面积', whitespace: true}]}]"/>
                        </a-form-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-item
                            label="建档人员">
                            <a-input
                                placeholder="建档人员"
                                v-decorator="['creator',
                                {rules: [{ required: true, message: '建档人员', whitespace: true}]}]"/>
                        </a-form-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-item
                            label="建档日期">
                            <a-date-picker
                                           style="width: 100%"
                                           v-decorator="['create_date',
                                {rules: [{ required: true, message: '建档日期'}]}]"/>
                        </a-form-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-item
                            label="备注">
                            <a-input
                                placeholder="备注"
                                v-decorator="['remark',
                                {rules: [{ required: true, message: '备注', whitespace: true}]}]"/>
                        </a-form-item>
                    </a-col>
                </a-row>
                
                <a-row class="form-row" :gutter="32">
                    <a-col :span="24">
                        <a-form-item
                            label="项目文档">
                            <up-load-drag @change="handleUploadChange"></up-load-drag>
                        </a-form-item>
                    </a-col>
                </a-row>
                <!--                <a-button type="primary" :loading="loading" htmlType="submit">提交</a-button>-->
                <footer-tool-bar>
                    <a-button type="primary" :loading="loading" htmlType="submit">提交</a-button>
                </footer-tool-bar>
            </a-form>
        </a-card>
        <!--         fixed footer toolbar -->
    
    </div>
</template>

<script>

    import FooterToolBar from '@/components/tools/FooterToolBar'
    import indexedDB from '@/db/db'
    import moment from 'moment'
    import UpLoadDrag from '@/components/upload/UpLoadDrag'
    export default {
        name: "DevelementPlans",
        components: {
            FooterToolBar,
            UpLoadDrag
        },
        props:{
            projectNumber: String,
            projectName: String,
        },
        data() {
            return {
                loading: false,
                form: this.$form.createForm(this),
                //
                dataInit: {
                    test: '123',
                },
                p:[],
                hasDev: false,
                filesList:[]
                

            }
        },
        mounted() {
        
        },
        methods: {
            
            handleUploadChange(list){
                // console.log(list)
                this.filesList = list
            },
            handleSubmit(e) {
                e.preventDefault()
                this.form.validateFields((err, values) => {
                    if (!err) {
                        // eslint-disable-next-line no-console
                        console.log('Received values of form: ', values)
                        // indexedDB 不支持date格式  转换成字符串
                        values.create_date = moment(values.create_date).format('YYYY-MM-DD')
                        values.files = this.filesList
                        console.log(values)
                        indexedDB.insert({name:'plansLand'}, values).then(res => {
                            this.$emit('saveSuccess')
                            this.$success({
                                title: `保存成功`,
                                content: `点击确定返回`,
                            })
                        })
                    }
                })
            },
            
        },
    }
</script>

<style lang="scss" scoped>
    .card {
        margin-bottom: 24px;
    }
    .title {
        font-size: 20px;
        line-height: 28px;
        font-weight: 500;
        color: rgba(0, 0, 0, 0.85);
        margin: 16px 0 30px 0;
    }
</style>